<template>
	<div class="card-confirm-order-custom">
		<div class="form-info">
			<div class="item user-info">
				<div class="user-name">
					<span>联系人：</span>
					<input type="text"  v-if='custname' :value='custname' @input='saveValue("username",$event)' maxlength="16" />
					<input type="text"  v-else placeholder="填写联系人姓名" @input='saveValue("username",$event)' maxlength="16" v-model="customNameUser"/>
				</div>
				
			</div>
			<div class="item user-info">
				<div class="user-name">
					<span>手机号：</span>
					
				</div>
				<div class="phone">
					<!--<input type="tel" class="mt4" v-if='mobilephone' @input='saveValue("phone",$event)' :value='mobilephone' />
					<input type="tel" class="mt4" v-else placeholder="填写手机号" @input='saveValue("phone",$event)' maxlength="11" v-model="mobilePhoneUser"/>-->
					<!-- <a class="mobilephone" href="#">{{mobilephone}}</a> -->
					<span class="mobilephone">{{mobilephone}}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
//			debugger;
				return {
					customNameUser:sessionStorage.getItem('username')
//					mobilePhoneUser:sessionStorage.getItem('phone')
				}
			},
			props: {
				custname:{
					type:String,
					default:''
				},
				mobilephone:{
					type:String,
					default:''
				}
			},
			methods: {
				saveValue: function(name,event) {
		                var self = this,
		                    val = this.trim(event.currentTarget.value);
		                 sessionStorage.setItem(name, val);
		       },
		       /**
		         *  去除前后空格
		         * @param {String} str
		         * @reutrn {String} 
		         */
		        trim: function ( str ) {
		        	if ( str ) {
					    return str.replace(/(^\s*)|(\s*$)/g, "");
		        	}
		        	return '';
				},
				
			},
			ready: function() {

			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";

	.mt4{
        margin-top: rem(4);
	}
	.card-confirm-order-custom {
		font-size: rem(14);
		color: #333;
		margin:0 rem(20);
		background:$_fff;
		.form-info{

			background: #fff;
			font-size: rem(14);
			color: #333;
			.item{
				display: flex;
				align-items: center;
				/*width: rem(375);*/
				height: rem(54);
				border-bottom: 1px solid #c9d5e0;
			}
			.user-info{
				.user-name{
					height: rem(55);
					display: flex;
					align-items: center;
					span{
						font-size: rem(14);
						display: inline-block;
						height: rem(55);
						line-height: rem(55);
					}
					input{
						border: none;
						width: rem(274);
						font-size: rem(14);
						display: inline-block;
						line-height: rem(16);
						height: rem(16);
						padding: rem(13) 0;
						text-align:right;
					}
				}
				.phone{
					width:rem(270);
					height: rem(44);
					line-height: rem(44);
					text-align:right;
					span{
						font-size: rem(18);
						color: #999;
						display: block;
					}
					input{
						border: none;
						padding-left: rem(5);
						display: block;
						width: rem(100);
						color: #fff;
					}
					.mobilephone {
						font-size: rem(14) !important;
						line-height: rem(44);
						display: inline-block;
						margin-top: rem(2);
						padding-left: rem(2);    
						color: #8392A0;
						pointer-events: none;
						text-decoration: none;
					}					
				}
			}
			.choose-info-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #dedede;
				.left{
					
				}
				.right{
					padding-right: rem(20);
					span{
						color: #c7c7cc;
						font-size: rem(14);
					}
				}
				.store{
					color: #999;
				}
			}
		}
		}
</style>